<template>
  <div class="uploadBox">
    <div class="contentBox">
      <div class="iconBox">
        <el-upload
          class="avatar-uploader"
          :action="upload.action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div v-if="formData[pathName]">
            <img
              v-if="JSON.parse(formData[pathName]).iconType == 'img'"
              :src="JSON.parse(formData[pathName]).iconPath"
              class="avatar"
            />
            <svg-icon
              v-if="JSON.parse(formData[pathName]).iconType == 'svg'"
              :icon-class="JSON.parse(formData[pathName]).iconPath"
              class="avatar"
              size="88px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

        <!-- <div v-if="formData[pathName]" style="display:flex;align-content: center;justify-content: center;">
          <img
            v-if="JSON.parse(formData[pathName]).iconType=='img'"
            :src="JSON.parse(formData[pathName]).iconPath"
            class="avatar"
          />
          <svg-icon v-if="JSON.parse(formData[pathName]).iconType=='svg'" :icon-class="JSON.parse(formData[pathName]).iconPath" style="width:95px;height:95px"/>
        </div> -->
        <!-- <i v-else slot="reference" class="el-icon-plus avatar-uploader-icon"></i> -->
      </div>
      <div>
        <el-popover placement="right-start" width="450" trigger="click">
          <div class="popoverHeader">
            <div
              class="headerItem"
              @click="checkIconType('defaultIcon')"
              :class="{ activeHeader: currentHeader == 'defaultIcon' }"
            >
              选择默认图标
            </div>
            <div
              class="headerItem"
              @click="checkIconType('customIcon')"
              :class="{ activeHeader: currentHeader == 'customIcon' }"
            >
              上传自定义图标
            </div>
          </div>
          <div>
            <div class="icon-svg" v-if="currentHeader == 'defaultIcon'">
              <svg-icon
                @click="selectSvg(i)"
                v-for="(i, index) in icons"
                :key="index"
                :icon-class="i"
                class="card-panel-icon"
                size="60px"
              />
            </div>
            <div class="popoverUpload" v-if="currentHeader == 'customIcon'">
              <el-upload
                class="avatar-uploader"
                :action="upload.action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <div v-if="formData[pathName]">
                  <img
                    v-if="JSON.parse(formData[pathName]).iconType == 'img'"
                    :src="JSON.parse(formData[pathName]).iconPath"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </div>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <div style="font-size: 14px; margin-top: 10px; color: #ccc">
                建议上传有底色的图标,支持格式：png、jpg、jpeg、svg,建议尺寸250*250px,大小不超过5M
              </div>
            </div>
          </div>
          <template #reference>
            <div style="color: #048be6; cursor: pointer">
              {{ formData[pathName] ? '修改' : '添加' }}
            </div>
          </template>
        </el-popover>
      </div>
    </div>
    <!-- <div>
      <el-upload
        class="avatar-uploader"
        :action="upload.action"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >

        <div v-if="formData[pathName]">
          <img
            v-if="JSON.parse(formData[pathName]).iconType=='img'"
            :src="JSON.parse(formData[pathName]).iconPath"
            class="avatar"
          />
          <svg-icon v-if="JSON.parse(formData[pathName]).iconType=='svg'" :icon-class="JSON.parse(formData[pathName]).iconPath" style="width:88px;height:88px"/>
        </div>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div>
      <el-popover placement="bottom-start" width="390" trigger="click">
        <div class="icon-svg">
          <svg-icon @click="selectSvg(i)" v-for="(i, index) in icons" :key="index" :icon-class="i" class-name="card-panel-icon" />
        </div>
        <i slot="reference" class="el-icon-plus avatar-uploader-icon"></i>
      </el-popover>
    </div> -->
  </div>
</template>
<script>
import { getCustomUploadTrans } from '@code/components/anvil-code-low-common/utils/common-methods'
import defaultSettings from '@/settings'
import { icons } from './icon.js'
export default {
  props: {
    formData: {
      type: [Object, String]
    },
    pathName: {
      type: String,
      default: 'iconPath'
    }
  },
  data() {
    return {
      currentHeader: 'defaultIcon',
      upload: {
        action:
          import.meta.env.VITE_APP_BASE_API +
          (defaultSettings.isCould ? '/system-service' : '') +
          '/custom/upload',
        // action: process.env.VUE_APP_BASE_API + "/system-service/custom/upload",
        showImgUrl: this.formData[this.pathName]
      },
      icons
    }
  },
  methods: {
    checkIconType(data) {
      this.currentHeader = data
    },
    // 图片上传成功回调
    handleAvatarSuccess(res, file) {
      // this.formData.iconType = "img";
      console.log('file', file)
      this.upload.showImgUrl = URL.createObjectURL(file.raw)
      const { data } = res
      const fileObj = getCustomUploadTrans(data)
      const { url } = fileObj
      // const { url } = data;
      let path = {
        iconPath: url,
        iconType: 'img'
      }
      this.$emit('uploadImg', path)
      // this.formData[pathName] = JSON.stringify(path)
    },
    // 图片上传限制
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    //点击svg
    selectSvg(e) {
      // this.formData.iconType = 'svg'
      let path = {
        iconPath: e,
        iconType: 'svg'
      }
      // this.formData[pathName] = JSON.stringify(path)
      this.$emit('uploadImg', path)
    },
  }
}
</script>
<style lang="scss" scoped>
.popoverUpload {
  padding: 20px;
}
.popoverHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #f3f1f1;
  // height: 40px;
  // line-height: 40px;
  border-radius: 5px;
  padding: 3px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.headerItem {
  height: 30px;
  line-height: 30px;
  border-radius: 2px;
  width: 50%;
  text-align: center;
  cursor: pointer;
}
.activeHeader {
  background: #fff;
  color: #048be6;
}
.iconBox {
  width: 100px;
  height: 100px;
  // background: #8c939d;
  border: 1px solid #8c939d;
  margin-right: 20px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadBox {
  display: flex;
}
.icon-svg {
  // width: 50px;
  // height: 50px;
  max-height: 400px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  .card-panel-icon {
    width: 60px;
    height: 60px;
    cursor: pointer;
    font-size: large;
    box-sizing: border-box;
    margin: 10px;
    padding: 5px;
    border: 1px solid #eee;
    // &:hover {
    //   box-shadow: 0 0 10px 2px #c2c2c2;
    // }
  }
}
.form {
  min-height: calc(100vh - 170px);
  margin: 10px 220px;
  background-color: #fff;
  padding: 30px 300px;
}
.avatar-uploader {
  width: 88px;
  height: 88px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>
